<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <section id="wrap">
        <div id="scroll">
            <ul class="pics" id="item">
            </ul>
        </div>
    </section>
    <script src="js/transform.js"></script>
    <script src="js/dropload.js"></script>
    <script>
    var dataUrl = [];
    var length = 12;

    for (var i = 0; i < 50; i++) {
        dataUrl.push("pics/" + (i % 16 + 1) + ".jpg");
    }
    var start = 0;
    var end = start + length;
    console.log(end)
    end = end > dataUrl.length ? dataUrl.length : end;

    function createImg() {
        console.log(start, end)
        for (var i = 0; i < 6; i++) {
            var li = document.createElement("li");
            var img = document.createElement("img");
            img.src = dataUrl[i];
            li.appendChild(img);
            document.querySelector("#item").appendChild(li);
            console.log(i)
        }
    }
    window.onload = function() {
        var opt = {
            scrollArea: document.querySelector("#wrap"),

            domUp: {
                "domClass": 'dropload-up',
                "domRefresh": '<div class="dropload-refresh">↓下拉刷新</div>',
                "domUpdate": '<div class="dropload-update">↑释放更新</div>',
                "domLoad": '<div class="dropload-load">○加载中...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load">○加载中...</div>',
                domNoData: '<div class="dropload-noData">暂无数据</div>'
            },
            autoLoad: true,
            distance: 50,
            threshold: "",
            loadUpFn: "",
            loadDownFn: function(me) {
                console.log(me)
                if (document.querySelectorAll("li") && document.querySelectorAll("li").length >= 12) {
                    me.noData(true);
                    me.resetload();
                    return false;
                } else {
                    createImg();
                    me.resetload();
                }
            }
        };
        var y = new Dropload(opt);
        //y.init();
        // y.resetload();
        // y.lock();
        // y.noData(true);
    }
    </script>
</body>

</html>